<template>
  <div>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">产品详情</x-header>
    <div class="financialItem">
      <div class="item blue" v-for="(item, index) in financialData.list" :key="index" @click="gotoNext()">
        <div class="hd">
          <strong>{{item.productName}}</strong>
          <em>{{item.productType}}</em>
          <em>{{item.currency}}</em>
        </div>
        <div class="bd">
          <h3>{{item.netValue}}</h3>
          <span>最新产品净值</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      financialData: {
        list: [{
          productName: '', // 产品名称
          productType: '', // 产品类型
          currency: '', // 计价币种
          netValue: '' // 净值
        }, {
          productName: '', // 产品名称
          productType: '', // 产品类型
          currency: '', // 计价币种
          netValue: '' // 净值
        }]
      }
      // financialData: {
      //   list: [{
      //     productName: '东亚联丰环球债券', // 产品名称
      //     productType: '债券型', // 产品类型
      //     currency: '人民币', // 计价币种
      //     netValue: '23.98000' // 净值
      //   }, {
      //     productName: 'JPM新兴市场债券', // 产品名称
      //     productType: '债券型', // 产品类型
      //     currency: '人民币', // 计价币种
      //     netValue: '23.98000' // 净值
      //   }]
      // }
    }
  },
  created () {
    this.getFinancialData()
  },
  methods: {
    getFinancialData () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_name': 'FinancialChange', 'user_Data': {'list': 'all'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.financialData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    gotoNext () {
      this.$router.push({name: 'MyFinancialMange'})
    }
  }
}
</script>

<style lang="less" scoped>
  .financialItem {
    padding: .3rem;
    .item {
      padding: .58rem .93rem;
      height: 1.44rem;
      margin-bottom: .2rem;
      border-radius: .06rem;
      color: #fff;
      line-height: 1;
      strong {
        font-weight: normal;
      }
      em {
        display: inline-block;
        padding: .06rem .13rem;
        font-size: .18rem;
        border: .01rem solid #fff;
        border-radius: .22rem;
        vertical-align: .03rem;
      }
      h3 {
        // todo 此处需要用到 PingFang-SC-Bold 字体
        padding: .24rem 0 .21rem;
        font-size: .6rem;
      }
      span {
        font-size: .24rem;
        color: rgba(255,255,255,.8)
      }
    }
    & .blue {
      background: linear-gradient(to right, #5659de, #6383df);
    }
  }
</style>
